import React, { Component } from 'react'
import { searchQuery } from './../../utils/querySearch';
import { getSongList, getMusicInfo } from './../../api/musicList';
import styles from "./keySearchMusicList.less"
import classNames from 'classnames';
import Icon from './../../components/icon/Icon';
import { connect } from "react-redux"
@connect(
  (state) => ({
    PayingMusic: state.PayingMusic,
    musicList: state.musicList
  }),
  dispatch => ({
    setMusic: (info) => dispatch({ type: 'platingMusic/save', payload: info }),
    addMusicList: (info) => dispatch({ type: 'musicList/add', payload: { info } }),
  })
)
export default class keySearchMusicList extends Component {
  state = {
    songListMusic: null,
  }
  componentDidMount() {
    let search = this.props.location.search
    const {keyword} = searchQuery(search)
    if(keyword) {
      this.setState({
        keywords: keyword
      },() => {
        this.searchKeywords()
      })
    }
  }
  // !
  searchKeywords = async () => {
    let res = await getMusicInfo({keywords: this.state.keywords})
    console.log(res);
    this.setState({
      songListMusic: res.songs
    })
  }
  playMusic =async(detail, e) => {
    if(e) {
      e.preventDefault();
    }
    this.props.setMusic(detail)
  }
  addMusicList = async (detail, e) => {
    if(e) {
      e.preventDefault();
    }
    if(!this.props.PayingMusic.id) {
      this.playMusic(detail)
    }
    this.props.addMusicList(detail)
  }
  render() {
    const {songListMusic} = this.state
    if (!songListMusic) {
      return (<div>请稍等</div>)
    }
    return (
      <div className={styles.key_search_music_list_box}>
        <div className={styles.key_search_music_list}>
          {/* <a href="#">MusicList</a>
          <div className={styles.top}>
            <div className={styles.top_img_box}>
              <img src={songListInfo.coverImgUrl} alt="" />
            </div>
            <div className={styles.info}>
              <div className={styles.song_list_name}>{songListInfo.name}</div>
              <div className={styles.description}>{songListInfo.description}</div>
              <div className={styles.tags}>
                标签：{
                  songListInfo.tags.map(item => (
                    <span key={item}>{item}</span>
                  ))
                }</div>
            </div>
          </div> */}
          <div className={styles.music_data_list}>
            <div className={styles.music_data_title}>
              <div className={styles.music_data_index}></div>
              <div className={styles.music_data_name}>歌曲</div>
              <div className={styles.music_data_artists}>歌手</div>
              <div className={styles.music_data_album}>专辑</div>
              <div className={styles.music_data_duration}>时长</div>
            </div>
            {songListMusic.map((item, index) => (
              <div key={item.id} className={classNames(styles.music_data_data)} > 
              {/* onClick ={(e) => this.playMusic(item, e)} */}
                <div className={styles.music_data_index}>{index + 1}</div>
                <div className={styles.music_data_name}>
                  <div className={styles.music_data_name_box}>
                    {item.name}
                  </div>
                  <div className={styles.music_icon}>
                    <div className={styles.music_play_icon} onClick ={(e) => this.playMusic(item, e)}>
                      <Icon type="icon-bofang1"/>
                    </div>
                    <div className={styles.music_play_icon} onClick={(e) => this.addMusicList(item, e)} >
                      <Icon type="icon-jia1"/>
                    </div>
                  </div>
                </div>
                <div className={styles.music_data_artists}>{
                  item.artists.map((artist, index) => (
                    <span key={index}>{artist.name} </span>
                  ))
                }</div>
                <div className={styles.music_data_album}>{item.album.name ? item.album.name : "未知"}</div>
                <div className={styles.music_data_duration}>{item.duration ?
                  (
                    <>
                    {parseInt(item.duration / 1000 / 60) < 10 ? "0" + parseInt(item.duration / 1000 / 60) : parseInt(item.duration / 1000 / 60)}： 
                    {parseInt(item.duration / 1000 % 60) < 10 ? "0" + parseInt(item.duration / 1000 % 60) : parseInt(item.duration / 1000 % 60)}
                    </>
                  )
                : "未知"}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    )
  }
}
